<template>
    <div class="lgp_app" style="">
       <el-form ref="form" :model="form" label-width="80px"  style="width:98%"  >
            <el-form-item label="商品链接">
                <el-input v-model="form.target" placeholder="请手动输入正确的请正淘宝/天猫/拼多多商品链接，输入错误链接会导致发布失败"></el-input>
            </el-form-item>
            <el-form-item label="宝贝id">
                <el-input v-model="form.itemid" ></el-input>
            </el-form-item>
            <el-row v-for="(field,index1) in form.field" :key="index1">
                <el-col :xs="20" :sm="20" :md="20" :lg="22" :xl="24"
                <el-form-item label="发布量">
                    <el-input v-model="field.count" v-on:input="count_change(index1)" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="24小时细分">
                    <el-row :gutter="10" style="margin: 0;">
                        <el-col :xs="6" :sm="3" :md="1" :lg="1" v-for="(te,index) in field.hour "
                                :key="index">
                            <div class="split_time">
                                <span class="hour_title">{{index}}</span>
                                <el-input v-model="field['hour'][index]"  v-on:input="time_change(index1)"
                                          placeholder="点"
                                          class="split_time_input"></el-input>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="发布天数">
                <el-row :gutter="10">
                    <el-col :lg="5">
                        <el-input v-model="form.send_day"></el-input>
                    </el-col>
                    <el-col :lg="8">
                        <el-button type="primary" @click="cilck1">7天</el-button>
                        <el-button type="primary" @click="cilck2">15天</el-button>
                        <el-button type="primary" @click="cilck3">30天</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.begin_time"
                                style="width: 20%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">发布任务</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  const field = {
    hour: Array(24),
    count: 100,
  }
  import { like } from '@/api/taobao'
  export default {
    data() {
      return {
        form: {
          target: '',

          send_day: 1,
          begin_time: new Date(),
          field: [field],
          itemid :''
        }
      }
    },
    methods: {
      onSubmit() {
        for (var a in this.form.field)
          var obj = this.form.field[a].hour.join(',')
        const all =  Object.assign(this.form.field[a],this.form)
        like({
          target: all.target,
          itemid:all.itemid,
          send_day :all.send_day,
          begin_time :all.begin_time,
          count :all.field[a].count,
          hour :obj,
          sign:'b4911d0f0f226da3d9189f848a8eed'}).then(response => {
          console.log(response)
        }).catch(
          function(error){
            console.log(error)
          }
        )
      },
      cilck1(){
        this.form.send_day = 7
      },
      cilck2(){
        this.form.send_day = 15
      },
      cilck3(){
        this.form.send_day = 30
      },
      time_change(index) {
        let field = this.form.field
        let hour = field[index].hour
        let time_count = hour.reduce( (accumulator, currentValue) =>parseInt(accumulator)+ parseInt(currentValue))
        field[index].count = time_count;
        field[index].show=time_count
      },
      count_change(index){
        let bg_time = this.form.begin_time
        const date = new Date();
        const chooser_date =  new Date(bg_time); // 选中时间
        let  time_splits = date.getHours() // 获取当前小时
        const current_day =  date.getDate() // 获取当前录入日期的天
        const chooser_day =  chooser_date.getDate()

        let offset  = (current_day === chooser_day ?  time_splits  :  0);

        let field = this.form.field
        let count = field[index].count
        let each_num = Math.floor(count/(24-offset-1));
        field[index].hour.fill(0);
        if (offset!==0){
          for (let i = offset+1; i <24; i++) {
            field[index].hour[i] = each_num;
          }
          field[index].show=count
          let x =count-each_num*(24-offset-1);
          for (let i = 0; i <x ; i++) {
            field[index].hour[i+offset+1]+=1;
          }
        }else{
          for (let i = offset; i <24; i++) {
            field[index].hour[i] = each_num;
          }
          field[index].show=count
          let x =count-each_num*(24-offset);
          for (let i = 0; i <x ; i++) {
            field[index].hour[i+offset]+=1;
          }
        }
        console.log(eval(field[index].hour.join('+')));

      },
    }
  }
</script>
<style>
    .lgp_app {
        padding: 0 20px;
    }

    .split_time {
        line-height: 25px;
        border: 1px solid #409EFF;
        margin-bottom: 10px;
        border-radius: 12px;
    }
    .hour_title {
        text-align: center;
        display: inline-block;
        width: 100%;
        border: 1px solid #cccccc;
        background-color: #409EFF;
        color: #ffffff;
        height: 25px;
        border-radius: 12px 12px 0 0;
        margin-bottom: 0;

        padding-bottom: 0;
    }

    .split_time_input input {
        padding: 0 6px;
        border: 0;
        height: 15px;
        border-radius: 0 0 12px 12px;
        text-align: center;
    }


</style>
